<ion-header class="hc-header light">
  
    <a href="javascript:;" (click)="toggle()">{{ show_type }}</a>
    <span class="hc-header-search">
      <label class="iconfont icon-home_search"></label>
      <input type="search" (focus)="gotosearch()" :placeholder=" {{'input.search' | translate}} ">
    </span>
    <a (click)="gotofilter()">{{ 'home.Filter' | translate }}</a>
    <a (click)="goto(postPage)">{{ 'home.Post' | translate }}</a>
</ion-header>

<ion-content>
  <div class="hc-content-map" [class.active]="show_type==='List'">
    <div style="position:absolute;width:100%;height:100%">
        <div style="height:100%;position:relative;">
            <div class="nav-map">
              <span [class.active]="2 === selectedItem" (click)="chooseType(2)">{{ 'home.Buy' | translate }}</span>
              <span [class.active]="1 === selectedItem" (click)="chooseType(1)">{{ 'home.Rent' | translate }}</span>
              <span [class.active]="3 === selectedItem" (click)="chooseType(3)">{{ 'home.Per' | translate }}</span>
              <span [class.active]="4 === selectedItem" (click)="chooseType(4)">{{ 'home.Services' | translate }}</span>
            </div>
            <div class="position_map">
              <div (click)="set_position()">
                  <span class="iconfont icon-Map_Positioning"></span>
              </div>
            </div>
            <div class="save_search">
              <div style="z-index: 100;" (click)="save_search()">
                  <span class="iconfont icon-home_alerts"></span>
                  <font>{{ 'home.s' | translate }}</font>
              </div>
            </div>
            <div id="map_canvas" #map_canvas style="height:100%">
            
            </div>
        </div>
        
        <div class="house" *ngIf="detail_active && detail.cate!=4"  style="z-index: 100;" (pandown)="detail_active=false">
          <div class="house_content" (click)="goDetail(detail)" >
            <div class="house_img" [style.background-image]="detail.img"><a class="iconfont"><img [src]=" detail.collected?'./assets/imgs/love_active.png':'./assets/imgs/love.png' " alt=""></a></div>

            <div class="house_info">
              <p><i class="iconfont icon-map_map"></i><font>{{detail.address}}</font></p>
              <p> 
                <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{detail.living}}</font> </label>
                <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{detail.bedroom}}</font> </label>
                <label for=""> <i class="iconfont icon-bad"></i><font>{{detail.bathroom}}</font> </label>
                <label for=""> <font>{{detail.area}}{{detail.area_unit}}({{detail.other_area}}{{detail.other_area_unit}})</font> </label>
              </p>
              <p>
                <font>{{detail.cateName}}</font>
                <span>{{detail.price_unit}}{{detail.price}}<span *ngIf="detail.cate!=2"> /{{detail.price_type}}</span></span>
              </p>
            </div>
          </div>
        </div>
        <div class="service" *ngIf="detail_active && detail.cate==4">
            <div class="service_content"  (click)="goDetail(detail)">
                <div class="service_img" [style.background-image]="'url('+src+detail.avatar+')'"></div>
                <div class="service_info">
                    <h5>{{detail.title.replace('|',' ')}}<a *ngIf="detail.collected==true" class="iconfont icon-list_heartsvg active"></a><a *ngIf="detail.collected==false" class="iconfont icon-list_heartsvg"></a></h5>
                    <p>{{detail.address}}<font class="price">{{detail.price_unit}}{{detail.price}}/once</font>  </p>
                    <p>
                        <span class="stars">
                            <i class="iconfont" [class.icon-star]="detail.star>=1" [class.icon-star1]="detail.star<1"></i>
                            <i class="iconfont" [class.icon-star]="detail.star>=2" [class.icon-star1]="detail.star<2"></i>
                            <i class="iconfont" [class.icon-star]="detail.star>=3" [class.icon-star1]="detail.star<3"></i>
                            <i class="iconfont" [class.icon-star]="detail.star>=4" [class.icon-star1]="detail.star<4"></i>
                            <i class="iconfont" [class.icon-star]="detail.star>=5" [class.icon-star1]="detail.star<5"></i>
                        </span> 
                        {{detail.num}} reviews 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="hc-content-list" [class.active]="show_type==='Map'">
      <div class="nav-map">
        <span [class.active]="2 === selectedItem" (click)="chooseType(2)">{{ 'home.Buy' | translate }}</span>
        <span [class.active]="1 === selectedItem" (click)="chooseType(1)">{{ 'home.Rent' | translate }}</span>
        <span [class.active]="3 === selectedItem" (click)="chooseType(3)">{{ 'home.Per' | translate }}</span>
        <span [class.active]="4 === selectedItem" (click)="chooseType(4)">{{ 'home.Services' | translate }}</span>
      </div>
      <div class="nav-mask"></div>
      <div class="list-content">
        <div *ngFor="let house of list" (click)="goDetail(house)" v-if="list.length<1">
          <div class="house" *ngIf="house.cate!=4">
            <div class="house_content">
              <div class="house_img" [style.background-image]="house.img">
                <a class="iconfont"><img [src]=" house.collected?'./assets/imgs/love_active.png':'./assets/imgs/love.png' " alt=""></a>
              </div>
              <div class="house_info">
                <p><i class="iconfont icon-map_map"></i><font>{{house.address}}</font></p>
                <p> 
                  <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{house.living}}</font> </label>
                  <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{house.bedroom}}</font> </label>
                  <label for=""> <i class="iconfont icon-bad"></i><font>{{house.bathroom}}</font> </label>
                  <label for=""> <font>{{house.area}}{{house.area_unit}}({{house.other_area}}{{house.other_area_unit}})</font> </label>
                </p>
                <p>
                  <font>{{house.cateName}}</font>
                  <span >{{house.price_unit}} {{house.price}} <span *ngIf="house.cate!=2"> /{{house.price_type}}</span></span>
                </p>
              </div>
            </div>
          </div>
          <div class="service" *ngIf="house.cate==4">
              <div class="service_content">
                  <div class="service_img" [style.background-image]="'url('+src+house.avatar+')'"></div>
                  <div class="service_info">
                      <h5>{{house.title.replace('|',' ')}}<a *ngIf="house.collected==true" class="iconfont icon-list_heartsvg active"></a><a *ngIf="house.collected==false" class="iconfont icon-list_heartsvg"></a></h5>
                      <p>{{house.address}}<font class="price">{{house.price_unit}}{{house.price}}/once</font>  </p>
                      <p>
                          <span class="stars">
                              <i class="iconfont" [class.icon-star]="house.star>=1" [class.icon-star1]="house.star<1"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=2" [class.icon-star1]="house.star<2"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=3" [class.icon-star1]="house.star<3"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=4" [class.icon-star1]="house.star<4"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=5" [class.icon-star1]="house.star<5"></i>
                          </span> 
                          {{house.num}} reviews 
                      </p>
                  </div>
              </div>
          </div>
        </div>
        
      </div>
      <div class="save_search">
          
        <a href="javascript:;" (click)="presentActionSheet()" style="position:relative;">
            {{ 'home.Sort' | translate }}
          <ion-multi-picker [(ngModel)] = "default" (ngModelChange)="picker()" item-content [multiPickerColumns]="dependentColumns" doneText="OK"></ion-multi-picker>
         
        </a>
        <a href="javascript:;" (click)="save_search()">{{ 'home.Save' | translate }}</a>
      </div>
      <!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll> -->
    </div>
    
</ion-content>

